<template>
  <div class="paymentStatementContainer">
    <div class="searchContainer">
      <el-form ref="form" :model="searchData" :inline="true">
        <el-form-item label="订单号" size="mini" style="width: 270px">
          <el-input
            v-model="searchData.order_no"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="运单号" size="mini" style="width: 270px">
          <el-input
            v-model="searchData.waybill_no"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item size="mini">
          <el-button
            type="primary"
            data-tracker="P14-1"
            icon="el-icon-search"
            @click="displayOrders"
            >查询</el-button
          >
          <el-button
            plain
            icon="el-icon-refresh-left"
            data-tracker="P14-2"
            @click="resettingData"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="orders"
      :max-height="maxheight"
      ref="multipleTable"
      border
      align="center"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column
        prop=""
        fixed
        label="序号"
        width="50"
        type="index"
      ></el-table-column>
      <el-table-column prop="order_no" label="订单号" fixed width="150">
      </el-table-column>
      <el-table-column prop="waybill_no" label="运单号" width="150">
      </el-table-column>
      <el-table-column prop="type" label="支付类型" width="150">
        <template slot-scope="scope">
          {{ scope.row.type === "0" ? "支付" : "退款" }}
        </template>
      </el-table-column>
      <el-table-column prop="pay_channel" label="支付渠道" width="150">
        <template slot-scope="scope">
          {{ scope.row.pay_channel === "0" ? "微信小程序" : "二维码支付" }}
        </template>
      </el-table-column>
      <el-table-column prop="total_money" label="总运费" width="150">
      </el-table-column>
      <el-table-column prop="paid_money" label="支付/退款金额" width="150">
      </el-table-column>
      <el-table-column prop="transaction_id" label="第三方流水号" width="250">
      </el-table-column>
      <el-table-column prop="pay_time" label="支付/退款时间" width="150">
        <template slot-scope="scope">
          {{
            new Date(Number(scope.row.pay_time) * 1000)
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="creator_name" label="操作人" width="180">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="250">
      </el-table-column>
      <!-- <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="openPayment(scope.row)"
            >支付</el-button
          >
          <el-button size="small" type="text" @click="handelRefund(scope.row)"
            >退款</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <!-- <el-dialog
      title="微信支付"
      :visible.sync="paymentQrcodeVisible"
      width="20%"
      center
      append-to-body
    >
      <el-image :src="qrcodeUrl" fit="cover"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeQrcode">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="退款"
      :visible.sync="refundVisible"
      width="40%"
      center
      append-to-body
    >
      <el-form label-width="100px">
        <el-form-item label="退款时间">
          <el-date-picker
            v-model="createTime"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间"
            default-time="12:00:00"
            style="width: 400px"
          >
          </el-date-picker
        ></el-form-item>
        <el-form-item label="退款备注">
          <el-input
            type="textarea"
            style="width: 400px"
            v-model="refundValue.remark"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="refundVisible = false" style="margin-right: 20px"
          >关闭</el-button
        >
        <el-popover placement="top" width="160" v-model="refundConfirmVisible">
          <p>确定要退款吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button
              size="mini"
              type="text"
              @click="refundConfirmVisible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="confirmRefund"
              >确定</el-button
            >
          </div>
          <el-button slot="reference" type="primary">确定</el-button>
        </el-popover>
      </span>
    </el-dialog> -->
    <div class="operation">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalListNum"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqWxPayQrcode, reqRefund } from "@/api/waybill";
import { reqPaymentStatementList } from "@/api/finance";
export default {
  name: "paymentStatementList",
  data() {
    return {
      searchData: {
        order_no: "",
        waybill_no: "",
      },
      orders: [],
      pageNum: 1, //目前在第几页
      totalListNum: 10, //列表总数
      pageSize: 20, //一页多少条
      maxheight: "auto",
      selectedOrders: [],
      paymentQrcodeVisible: false, //微信支付二维码
      qrcodeUrl: "",
      refundVisible: false, //退款的弹出框
      refundConfirmVisible: false, //退款二次确认的
      createTime: Date.now(),
      refundValue: {
        //退款信息
        waybill_id: "",
        refund_time: "",
        remark: "",
      },
    };
  },
  mounted() {
    this.displayOrders();
  },
  methods: {
    async displayOrders() {
      const { pageNum, pageSize, searchData } = this;
      let result = await reqPaymentStatementList({
        page: pageNum,
        page_size: pageSize,
        order_no: searchData.order_no,
        waybill_no: searchData.waybill_no,
        type: [], // 交易类型:0支付;1退款;
        pay_channel: "", // 支付渠道, 0微信小程序;1二维码支付
        status: "", // 状态:1已支付;4已退款
      });
      if (result && result.code === 10000) {
        this.orders = result.data.data || [];
        if (this.orders.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 245;
        } else {
          this.maxheight = "auto";
        }
        this.pageNum = result.data.pagination.current_page;
        this.pageSize = result.data.pagination.per_page_count;
        this.totalListNum = result.data.pagination.total;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.displayOrders();
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.displayOrders();
    },
    handleSelectionChange(checked) {
      this.selectedOrders = checked.map((item) => item.id);
    },
    resettingData() {
      Object.assign(this.$data.searchData, this.$options.data().searchData);
      this.displayOrders();
    },
    async openPayment(val) {
      let res = await reqWxPayQrcode({
        order_id: val.order_id * 1,
        waybill_id: 0,
      });
      if (res.code !== 10000) {
        this.$message({
          message: res.message,
          type: "warning",
        });
      } else {
        this.qrcodeUrl = res.data.code_data;
        this.paymentQrcodeVisible = true;
      }
    },
    closeQrcode() {
      this.paymentQrcodeVisible = false;
      setTimeout(() => {
        this.displayOrders();
      }, 1000);
    },
    handelRefund(val) {
      this.refundVisible = true;
      this.refundValue.waybill_id = val.waybill_id;
    },
    async confirmRefund() {
      this.refundValue.refund_time = (this.createTime + "").slice(0, 10) * 1;
      let res = await reqRefund(this.refundValue);
      if (res.code !== 10000) {
        this.$message({
          message: res.message,
          type: "warning",
        });
      } else {
        this.$message({
          message: "退款成功",
          type: "success",
        });
        this.refundVisible = false;
        this.refundConfirmVisible = false;
        setTimeout(() => {
          this.displayOrders();
        }, 1000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.paymentStatementContainer {
  padding: 10px 15px;
  background-color: #fff;
  // height: 80vh;
  .operation {
    height: 40px;
    .el-button {
      margin-left: 0px;
      margin-right: 10px;
    }
    ::v-deep .el-pagination {
      float: right;
      margin: 0px 0px 0px 20px;
      .el-input--mini .el-input__inner {
        height: 24px;
      }
    }
  }
}
</style>